<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录账户设置" name="first">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名：" prop="username">
            <el-input
              style="width: 60%"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password2">
            <el-input
              style="width: 60%"
              type="password"
              v-model="ruleForm.password2"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">更新</el-button>
            <el-button @click="$router.back()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="个人详情" name="second">
        <!-- 动态绑定组件，改变变量userComponent的值可以切换组件 -->
        <component :is="userComponent" />
      </el-tab-pane>
      <el-tab-pane label="岗位信息" name="third">
          <component :is='JobInfo'></component>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { getUserInfotx } from "@/api/user.js";
import { saveUserDetailById } from "@/api/employees.js";
import userInfo from "./components/user-info.vue";
import JobInfo from './components/job-info.vue';
export default {
  components: { userInfo, JobInfo },
  data() {
    return {
      userComponent: "user-info",
      JobInfo:'JobInfo',
      activeName: "first",
      userId: this.$route.params.id,
      ruleForm: {
        username: "",
        password2: " ",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 12, message: "密码长度为6-12位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClick() {},
    // 获取姓名与密码
    async getUserInfotx() {
      let res = await getUserInfotx(this.userId);
      this.ruleForm = res;
    },
    async save() {
      try {
        await this.$refs.ruleForm.validate();
        await saveUserDetailById({
          ...this.ruleForm,
          password: this.ruleForm.password2,
        });
        console.log({
          ...this.ruleForm,
          password: this.ruleForm.password2,
        });
        this.$message.success("更新成功");
      } catch (err) {
        console.log(err);
      }
    },
  },
  created() {
    this.getUserInfotx();
  },
};
</script>

<style scoped lang='scss'>
.box-card {
  margin: 20px;
  .el-form {
    width: 600px;
    margin: 50px auto;
  }
}
</style>